<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
</head>

<body>
    <h1>
        距离<span style="color: blue;" >2020年10月31号</span>还有：
        <span style="font-size: 50px; color: red;" id="day"></span>
        天！
    </h1>
    <div>

        <br>
        今天还剩：
        <input type="text" id="hour">时
        <input type="text" id="minute">分
        <input type="text" id="second">秒

    </div>
</body>
<script>
    function dateTime(){
        // 计算到2020年10月31号还差多少天
        // 1. 设置目标时间
        let targetDate = new Date(2020, 9, 31, 0, 0, 0);
        // alert(targetDate.toLocaleString());

        // 2. 获取系统当前时间
        let nowDate = new Date();
        // alert(nowDate.toLocaleString());

        // 3. 目标时间毫秒值
        let targetDateM = targetDate.getTime();

        // 4. 系统当前时间毫秒值
        let nowDateM = nowDate.getTime();

        // 5. 计算时间差
        let time = targetDateM - nowDateM;

        // 6. 计算倒计天数，时分秒
        // 日
        let dayT = time/1000/60/60/24;
        let day = Math.floor(dayT);
        // 时
        let hourT = (dayT-day)*24;
        let hour = Math.floor(hourT);
        // 分钟数
        let minuteT = (hourT-hour)*60;
        let minute = Math.floor(minuteT);
        // 秒
        let secondT = (minuteT-minute)*60;
        let second = Math.floor(secondT);

        // 获取参数，并赋值
        document.getElementById("day").innerText = day;
        document.getElementById("hour").value = hour;
        document.getElementById("minute").value = minute;
        document.getElementById("second").value = second;
    }

    setInterval("dateTime()",1000);

</script>

</html>